<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <router-link to="/home" replace tag="button">首页</router-link>
    <router-link to="/about" replace tag="button">关于</router-link>
    <router-link :to="'/user/'+userId" replace tag="button">用户</router-link>
    <router-link :to="{path:'/profile', query: {name: 'wwh', height: '1.4', age: '19'}}" replace tag="button">档案</router-link>
    <!-- <button @click="aboutClick">关于</button> -->
    <!-- <router-view/> -->
    <!-- keep-alive: 缓存组件，避免重复创建、销毁 -->
    <keep-alive><router-view></router-view></keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userId: "zhangsan"
    }
  },
  // methods: {
  // aboutClick(){
  //   this.$router.push("/about") // $router和$route的区别
  //   console.log("about click");
  //   }
  // }
};

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.active{
  color: red;
}
</style>
